/*滑过图片出现放大镜效果*/
$(function() {
			//<!-- 06滑过图片出现放大镜效果 -->
			//c
			//扩展学习https://www.w3school.com.cn/jquery/event_delegate.asp
			//整体效果：鼠标移入展示放大镜图标，移除删除
			//1、找到所有li标签(each)追加一个span标签覆盖img标签
			//2、获取li标签中的img图片的宽高
			//3、构建span标签，并设置位置将宽高和img的宽高位置一致
			//4、并将该span标签追加到当前li标签内
			//5、给未来的元素即span标签添加鼠标滑入滑出事件(隐藏或者显示imageOver样式)
			//（live和delegate   $(选择器).delegate("子选择器",事件类型,"函数")）
			$("#jnBrandList li").each(function(){
				var $img=$(this).find("img");
				var img_w=$img.width();
				var img_h=$img.height();
				var spanHtml='<span style="position:absolute;top:0;left:5px;width:'+img_w+'px;height:'+img_h+'px;" class="imageMask"></span>';
				$(this).append(spanHtml);
			})
			$("#jnBrandList").delegate(".imageMask","hover",function(){
				$(this).toggleClass("imageOver")
			})
			
			
})

// /* 滑过图片出现放大镜效果 */
// $(function() {
//     $("#jnBrandList li").each(function(index) {
//         var $img = $(this).find("img");
//         var imgW = $img.width();
//         var imgH = $img.height();
//         var spanHtml = '<span style="position:absolute;top:0;left:5px;width:' + imgW + 'px;height:' + imgH + 'px;" class="imageMask"></span>';
//         $(spanHtml).appendTo(this);
//     });
// 	$("#jnBrandList").delegate(".imageMask", "hover", function(){
// 		$(this).toggleClass("imageOver");
// 	});
	
// 	/*
// 	$("#jnBrandList").find(".imageMask").live("hover", function(){
// 		$(this).toggleClass("imageOver");
// 	});
// 	*/
// })
